import React,{Component} from 'react'

import {
    View,
    Text,
    StyleSheet,
    TouchableNativeFeedback,
    Image
}from 'react-native'

const styles=StyleSheet.create({
    add:{
        width:25,
        padding:10,
        height:25
    },
    decrease:{
        width:25,
        padding:10,
        height:25
    },
    touch:{
        borderRadius:30,
        backgroundColor:'#1296db'
    },
    num:{
        paddingLeft:10,
        paddingRight:10
    },
    changewarp:{
        width:100,
        padding:10,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    }
})



class Change extends Component {
    constructor(props) {
    super(props);
    this.state = {
        data:this.props.data,
        showdecrease:this.props.data.num>0?true:false,
    };
    }
    state={
        data:{}
    }
    add=()=>{
        this.props.data.num++
        this.props.makesure()
        if(this.props.data.num>0){
           this.setState({
            showdecrease:true,
        }) 
        }
        this.setState({
            data:this.state.data
        })
    }
    decrease=()=>{
        this.props.data.num--
        this.props.makesure()
        if(this.props.data.num==0){
           this.setState({
            showdecrease:false,
        }) 
        }
        this.setState({
            data:this.state.data
        })
    }
    render(){
        return(
        <View style={styles.changewarp}>
        {this.props.data.num>0
        ?
        
        <TouchableNativeFeedback
        background={TouchableNativeFeedback.Ripple('#1296db',true)}
        onPress={()=>{
           this.decrease()
            
            }
        }
        >
        <View style={styles.touch}>
        <Image source={require('../img/decrease.png')}
        style={styles.decrease}
        />
        </View>
        
        </TouchableNativeFeedback>
        :
        <Text style={{width:50}}></Text>}
        {
        this.props.data.num>0
        ?
        <Text style={styles.num}>
        {this.props.data.num}
        </Text>
        :
        <Text></Text>
        }
        <TouchableNativeFeedback
        background={TouchableNativeFeedback.Ripple('#1296db',true)}
        onPress={()=>{
           this.add()
           
            }
        }
        >
        <View style={styles.touch}>
        <Image style={styles.add}
        source={require("../img/add.png")}
        />
        </View>
        </TouchableNativeFeedback>
        </View>
    )
    }
}






export default Change